<template>
  <div class="hv-form-property-container">
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="baseProperty" header="基本属性">
        <hv-base-props-group :compData="propData" />
      </a-collapse-panel>

      <a-collapse-panel key="styleProperty" header="样式属性">
        <div class="hv-form-data-container">
          <hv-border-style-group :compData="propData" />
          <hv-transform-group :compData="propData" />
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="compOptionProperty" header="组件属性">
        <div class="hv-form-data-container" v-if="propData && propData.componentProps">
          <a-row>
            <a-col :span="12" class="hv-visual-property-label">音频控件：</a-col>
            <a-col :span="12" class="hv-visual-property-label">自动播放：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="12">
              <a-switch
                checked-children="显示音频控件"
                un-checked-children="隐藏音频控件"
                v-model:checked="propData.componentProps.controls"
              />
            </a-col>

            <a-col :span="12">
              <a-switch
                checked-children="开启自动播放"
                un-checked-children="关闭自动播放"
                v-model:checked="propData.componentProps.autoplay"
              />
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12" class="hv-visual-property-label">循环播放：</a-col>
            <a-col :span="12" class="hv-visual-property-label">静音播放：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="12">
              <a-switch
                checked-children="开启循环播放"
                un-checked-children="关闭循环播放"
                v-model:checked="propData.componentProps.loop"
              />
            </a-col>
            <a-col :span="12">
              <a-switch
                checked-children="开启静音播放"
                un-checked-children="关闭静音播放"
                v-model:checked="propData.componentProps.muted"
              />
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24" class="hv-visual-property-label">预加载：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="24">
              <a-switch
                checked-children="开启预加载"
                un-checked-children="关闭预加载"
                v-model:checked="propData.componentProps.preload"
              />
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24" class="hv-visual-property-label">地址列表：</a-col>
          </a-row>
          <a-row class="hv-margin-bottom10">
            <a-col :span="24">
              <template
                v-if="
                  propData &&
                  propData.componentProps &&
                  propData.componentProps.sourceList
                "
              >
                <div
                  v-for="(item, index) in propData.componentProps.sourceList"
                  :key="index"
                  class="hv-margin-bottom10"
                >
                  <hv-visual-property-sub-row
                    :left-col-class-list="['hv-text-primary']"
                    :right-col-class-list="[
                      'hv-text-error',
                      'hv-cursor-pointer',
                      'hv-text-align-right',
                    ]"
                  >
                    <template #leftContent>地址{{ index + 1 }} </template>
                    <template #rightContent>
                      <hv-dynamic-icon
                        iconName="DeleteOutlined"
                        @click="removeSource(index)"
                      />
                    </template>
                  </hv-visual-property-sub-row>

                  <hv-visual-property-sub-row>
                    <template #title>来源： </template>
                    <template #content>
                      <a-select
                        v-model:value="item.sourceType"
                        size="small"
                        placeholder="请选择来源..."
                        dropdownClassName="hv-dark-select-dropdown"
                      >
                        <a-select-option
                          :value="option.value"
                          v-for="(option, optIndex) in mediaSourceListConst"
                          :key="option.value + optIndex"
                        >
                          {{ option.label }}
                        </a-select-option>
                      </a-select>
                    </template>
                  </hv-visual-property-sub-row>

                  <hv-visual-property-sub-row>
                    <template #title>地址： </template>
                    <template #content>
                      <a-textarea
                        v-model:value="item.src"
                        v-if="item.sourceType === mediaSourceConst.url"
                        placeholder="请输入地址"
                        style="height: auto"
                        :rows="3"
                      />
                      <div v-else>请选择来源！</div>
                    </template>
                  </hv-visual-property-sub-row>
                </div>
              </template>
              <a-button type="primary" size="small" @click="addSource">
                <hv-dynamic-icon iconName="PlusOutlined" />
                添加地址
              </a-button>
            </a-col>
          </a-row>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script lang="ts">
import { mediaSourceConst, mediaSourceListConst } from "@/visual/commons/consts/dashboard-const";
import useVisualProperty from "@/visual/hooks/use-visual-property";
import type AudioBoxPropOptionType from "@/visual/commons/types/audio-box-prop-option-type";
import type DashboardComponentType from "@/visual/commons/types/dashboard-component-type";
import { defineComponent, type PropType } from "vue";
import BasePropsGroup from "../common/BasePropsGroup.vue";
import BorderStyleGroup from "../common/BorderStyleGroup.vue";
import TransformGroup from "../common/TransformGroup.vue";
import VisualPropertySubRow from "../common/VisualPropertySubRow.vue";

export default defineComponent({
  name: "AudioPlayerProperty",
  components: {
    hvBasePropsGroup: BasePropsGroup,
    hvTransformGroup: TransformGroup,
    hvBorderStyleGroup: BorderStyleGroup,
    hvVisualPropertySubRow: VisualPropertySubRow,
  },
  props: {
    compData: {
      type: Object as PropType<DashboardComponentType<AudioBoxPropOptionType>>,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const { activeKey, propData } = useVisualProperty<AudioBoxPropOptionType>(props);

    /**
     * 添加
     */
    const addSource = () => {
      if (
        propData.value &&
        propData.value?.componentProps &&
        propData.value?.componentProps.sourceList
      ) {
        propData.value.componentProps.sourceList.push({
          src: "",
          sourceType: mediaSourceConst.url,
        });
      }
    };

    /**
     * 删除
     */
    const removeSource = (index: number) => {
      if (
        propData.value &&
        propData.value?.componentProps &&
        propData.value?.componentProps.sourceList
      ) {
        propData.value.componentProps.sourceList.splice(index, 1);
      }
    };

    return {
      activeKey,
      propData,
      mediaSourceListConst,
      mediaSourceConst,
      addSource,
      removeSource,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./AudioPlayerProperty.less";
</style>
